<template>
	<view class="forum-detail-page">
		<u-navbar :fixed="true" :safeAreaInsetTop="true" bgColor="transparent">
			<view class="u-nav-slot flex bgFff radius30 p10 pore" slot="left">
				<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/back.png" mode=""
					style="width: 40rpx;height: 40rpx;" @click="back"></image>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/home.png" mode=""
					style="width: 40rpx;height: 40rpx;" @click="toIndex"></image>
			</view>

			<view class="u-nav-slot flex bgFff radius30 p10 pore" slot="center">
				<image src="https://hxs.dsjhs.com:553/prod-api/profile/fenxiang-new.png" mode=""
					style="width: 40rpx;height: 40rpx;" ></image>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<image src="https://hxs.dsjhs.com:553/prod-api/profile/xihuan-icon-new.png" mode=""
					style="width: 40rpx;height: 40rpx;"></image>
			</view>
		</u-navbar>
		<!-- 轮播图 -->
		<view class="swiper-container" v-if="postDetail.images && postDetail.images.length > 0">
			<swiper class="swiper" :current="currentIndex" @change="onSwiperChange" indicator-dots
				indicator-active-color="#FFDE6D" circular :autoplay="false">
				<swiper-item v-for="(image, index) in postDetail.images" :key="index">
					<image :src="image.startsWith('http') ? image : api_host + image" mode="aspectFill"
						class="swiper-image" @click="previewImage(image)" />
				</swiper-item>
			</swiper>
			<view class="image-indicator">{{ currentIndex + 1 }}/{{ postDetail.images.length }}</view>
		</view>
		<view class="forum-content">
			<!-- 用户信息卡片 -->
			<view class="user-info-card">
				<view class="user-avatar">
					<image
						:src="postDetail.userAvatar.startsWith('http') ? postDetail.userAvatar : api_host + postDetail.userAvatar"
						mode="aspectFill" />
				</view>
				<view class="user-details">
					<view class="user-name">{{ postDetail.userName }}</view>
					<view class="post-time">使用黄小石2年·黄石港区</view>
					<!-- <view class="post-time">{{ formatTime(postDetail.createTime) }}</view> -->
				</view>
			</view>
			<!-- 互动数据 -->
			<view class="post-detail flex">
				<div class="post-item">
					<img src="https://hxs.dsjhs.com:553/prod-api/profile/liulan-new.png" alt="" srcset="">
					<span>3323</span>
				</div>
				<div class="post-item">
					<img src="https://hxs.dsjhs.com:553/prod-api/profile/dianzan-new.png" alt="" srcset="">
					<span>3323</span>
				</div>
				<div class="post-item">
					<img src="https://hxs.dsjhs.com:553/prod-api/profile/xiaoxi-new.png" alt="" srcset="">
					<span>3323</span>
				</div>
			</view>
			<!-- 帖子内容 -->
			<view class="post-content">
				<view class="content-text">{{ postDetail.content }}</view>
				<view class="post-date">
					<view class="post-date-item">发布时间：2024/12/31日 16:59</view>
					<view class="post-date-item">地址：xxxxxxxxxxxxxxxxxxx</view>
				</view>
				<img class="post-menu" src="https://hxs.dsjhs.com:553/prod-api/profile/caidan-new.png" alt="" srcset="">
			</view>


			<!-- 评论列表 -->
			<view class="comments-section" v-if="commentList.length > 0">
				<view class="tab-wrapper flex">
					<view class="comments-title current">评论 ({{ postDetail.commentCount || commentList.length }})
					</view>
					<view class="comments-title">赞和收藏 5</view>
				</view>
				<view class="comment-item-box" v-for="(comment, index) in commentList" :key="comment.id">
					<view class="comment-item">
						<view class="comment-avatar">
							<image
								:src="comment.userAvatar.startsWith('http') ? comment.userAvatar : api_host + comment.userAvatar"
								mode="aspectFill" />
						</view>
						<view class="comment-content">
							<view class="comment-user">{{ comment.userName }}</view>
							<view class="comment-text">{{ comment.content }}</view>
							<view class="comment-time flex justify-between">
								<span>{{ formatTime(comment.createTime) }}·黄石港区</span>
								<view class="reply flex gap30">
									<span>回复</span>
									<view class="like-icon align-center">
										<img src="https://hxs.dsjhs.com:553/prod-api/profile/dianzan-new.png" alt=""
											srcset="">
										<span>99</span>
									</view>
								</view>
							</view>
						</view>
					</view>



					<!-- 回复列表 -->
					<view class="reply-list"
						v-if="comment.replyList && comment.replyList.length > 0 && comment.showReplies">
						<view class="reply-item flex" v-for="(reply, replyIndex) in comment.replyList"
							:key="reply.id">
							<view class="comment-avatar">
								<image
									:src="reply.userAvatar.startsWith('http') ? reply.userAvatar : api_host + reply.userAvatar"
									mode="aspectFill" />
							</view>
							<view class="comment-content">
								<view class="comment-user">{{ reply.userName }}</view>
								<view class="comment-text">{{ reply.content }}</view>
								<view class="comment-time flex justify-between">
									<span>{{ formatTime(reply.createTime) }}·黄石港区</span>
									<view class="reply flex gap30">
										<span>回复</span>
										<view class="like-icon align-center">
											<img src="https://hxs.dsjhs.com:553/prod-api/profile/dianzan-new.png" alt=""
												srcset="">
											<span>99</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 展开评论列表 -->
					<view class="fold-reply-list" v-if="comment.replyList && comment.replyList.length > 0">
						<view class="line"></view>
						<view class="reply-length" @click="showReplyList(index)">
							<span>{{ comment.showReplies ? '收起' : '展开' + comment.replyList.length + '条回复' }}</span>
							<img :src="comment.showReplies ? 'https://hxs.dsjhs.com:553/prod-api/profile/shouqi-new.png' : 'https://hxs.dsjhs.com:553/prod-api/profile/zhankai-new.png'"
								alt="">
						</view>
					</view>
				</view>



				<!-- 加载更多评论 -->
				<view class="load-more-comments" v-if="!commentLastPage" @click="loadMoreComments">
					<view class="load-more-text" v-if="!commentLoading">点击加载更多评论</view>
					<view class="loading-text" v-else>加载中...</view>
				</view>
				<view class="no-more-comments" v-else-if="commentList.length > 0">
					<text>暂无更多评论</text>
				</view>
			</view>

			<!-- 暂无评论提示 -->
			<view class="no-comments" v-else-if="!commentLoading">
				<view class="no-comments-icon">💬</view>
				<view class="no-comments-text">暂无评论，快来抢沙发吧~</view>
			</view>

			<!-- 底部操作栏 -->
			<view class="bottom-actions">
				<view class="action-left">
					<img class="action-left-icon" src="https://hxs.dsjhs.com:553/prod-api/profile/pinglun-new.png"
						alt="" srcset="">
					<input class="action-left-input" type="text" placeholder="分享一些想法...">
				</view>
				<view class="action-right flex">
					<view class="action-item">
						<img src="https://hxs.dsjhs.com:553/prod-api/profile/xihuan-icon-new.png" alt="" srcset="">
						<span>1</span>
					</view>
					<view class="action-item">
						<img src="https://hxs.dsjhs.com:553/prod-api/profile/shoucang-new.png" alt="" srcset="">
						<span>2</span>
					</view>
					<view class="action-item">
						<img src="https://hxs.dsjhs.com:553/prod-api/profile/pinglun-icon-new.png" alt="" srcset="">
						<span>3</span>
					</view>
				</view>
			</view>

			<!-- 评论输入框 -->
			<view class="comment-input-overlay" v-if="showCommentInput" @click="hideCommentInput">
				<view class="comment-input-container" @click.stop>
					<textarea class="comment-textarea" v-model="commentContent" placeholder="写下你的评论..." auto-focus />
					<view class="comment-actions">
						<button class="cancel-btn" @click="hideCommentInput">取消</button>
						<button class="submit-btn" @click="submitComment" :disabled="!commentContent.trim()">发布</button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import navCom from '@/components/nav/nav.vue';
import { getForumDetail, likePost, getCommentList, addComment } from '@/common/api_meethuangshi.js';

export default {
	components: {
		navCom
	},
	data() {
		return {
			postId: '',
			currentIndex: 0,
			showCommentInput: false,
			commentContent: '',
			loading: false,
			commentLoading: false,
			postDetail: {
				id: '1001',
				userId: '88888',
				userName: '程序员小石',
				userAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face',
				content: '今天在黄石公园遇见了超美的日落🌅，感觉整个世界都安静下来了。大自然真的是最好的治愈师，工作的疲惫瞬间消失得无影无踪。希望能在这里遇到志同道合的朋友，一起分享生活中的美好时光～',
				images: [
					'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop',
					'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=600&fit=crop',
					'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=800&h=600&fit=crop'
				],
				tags: ['黄石公园', '日落', '自然风光', '治愈系', '摄影'],
				createTime: '2024-01-15 18:30:00',
				likeCount: 128,
				commentCount: 27,
				viewCount: 456,
				isLiked: false,
				matchRate: '91.7'
			},
			commentList: [
				{
					id: '102',
					userId: '10002',
					userName: '山水画',
					userAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
					content: '大自然的美景总是让人心旷神怡，期待下次能一起去看日出🌄',
					createTime: '2024-01-15 19:32:00',
					showReplies: false, // 控制回复列表展开状态
					replyList: [
						{
							id: '103',
							userId: '10002',
							userName: '用户昵称3',
							userAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
							content: '123456',
							createTime: '2024-01-15 19:32:00',
						}
					]
				},
				{
					id: '103',
					userId: '10003',
					userName: '文艺青年',
					userAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face',
					content: '你的文字很有诗意呢，看了你的分享我也想去黄石走走了～',
					createTime: '2024-01-15 20:08:00',
					showReplies: false, // 控制回复列表展开状态
					replyList: [] // 添加空的回复列表
				},

			],
			commentPage: 1,
			commentPageSize: 10,
			commentLastPage: false,
		}
	},
	onLoad(options) {
		this.postId = options.id || '1001'; // 默认ID用于测试
		// 注释掉API调用，直接使用静态数据展示效果
		// if (this.postId) {
		// 	this.getPostDetail();
		// 	this.getComments(true);
		// } else {
		// 	uni.showToast({
		// 		title: '帖子ID不存在',
		// 		icon: 'none'
		// 	});
		// 	setTimeout(() => {
		// 		uni.navigateBack();
		// 	}, 1500);
		// }

		// 模拟加载完成
		uni.showToast({
			title: '加载完成',
			icon: 'success',
			duration: 1000
		});
	},

	// 下拉刷新
	onPullDownRefresh() {
		this.refreshData();
	},

	// 页面显示时
	onShow() {
		// 如果用户从登录页面返回，重新获取数据
		if (this.hasLogin && this.postId) {
			this.getPostDetail();
		}
	},
	methods: {
		// 获取帖子详情
		async getPostDetail() {
			if (this.loading) return;
			this.loading = true;

			try {
				const res = await getForumDetail({ id: this.postId });
				if (res.code === 200) {
					this.postDetail = {
						...this.postDetail,
						...res.data,
						// 确保数组格式正确
						images: res.data.images || [],
						tags: res.data.tags || []
					};
				} else {
					uni.showToast({
						title: res.message || '获取详情失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取帖子详情失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},

		// 获取评论列表
		async getComments(isRefresh = false) {
			if (this.commentLoading) return;
			this.commentLoading = true;

			// 如果是刷新，重置分页
			if (isRefresh) {
				this.commentPage = 1;
				this.commentLastPage = false;
			}

			try {
				const res = await getCommentList({
					postId: this.postId,
					pageNum: this.commentPage,
					pageSize: this.commentPageSize
				});

				if (res.code === 200) {
					const newComments = (res.rows || []).map(comment => ({
						...comment,
						showReplies: false, // 为每个评论添加展开状态控制
						replyList: comment.replyList || [] // 确保回复列表存在
					}));

					if (isRefresh || this.commentPage === 1) {
						this.commentList = newComments;
					} else {
						this.commentList = [...this.commentList, ...newComments];
					}

					this.commentLastPage = res.lastPage || newComments.length < this.commentPageSize;
				} else {
					uni.showToast({
						title: res.message || '获取评论失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('获取评论失败:', error);
				uni.showToast({
					title: '网络错误，请稍后重试',
					icon: 'none'
				});
			} finally {
				this.commentLoading = false;
			}
		},

		// 加载更多评论
		async loadMoreComments() {
			if (this.commentLastPage || this.commentLoading) return;

			this.commentPage += 1;
			await this.getComments();
		},

		// 轮播图切换
		onSwiperChange(e) {
			this.currentIndex = e.detail.current;
		},

		// 预览图片
		previewImage(image) {
			const images = this.postDetail.images.map(img =>
				img.startsWith('http') ? img : this.api_host + img
			);
			const current = image.startsWith('http') ? image : this.api_host + image;
			uni.previewImage({
				urls: images,
				current: current
			});
		},

		// 切换点赞状态
		async toggleLike() {
			// 检查登录状态
			if (!this.hasLogin) {
				this.toLogin();
				return;
			}

			try {
				const res = await likePost({
					postId: this.postId,
					type: this.postDetail.isLiked ? 0 : 1  // 0: 取消点赞, 1: 点赞
				});
				if (res.code === 200) {
					this.postDetail.isLiked = !this.postDetail.isLiked;
					this.postDetail.likeCount += this.postDetail.isLiked ? 1 : -1;
					uni.showToast({
						title: this.postDetail.isLiked ? '点赞成功' : '取消点赞',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('点赞操作失败:', error);
				uni.showToast({
					title: '操作失败',
					icon: 'none'
				});
			}
		},

		// 显示评论输入框
		showCommentInput() {
			this.showCommentInput = true;
		},

		// 隐藏评论输入框
		hideCommentInput() {
			this.showCommentInput = false;
			this.commentContent = '';
		},

		// 提交评论
		async submitComment() {
			// 检查登录状态
			if (!this.hasLogin) {
				this.toLogin();
				return;
			}

			if (!this.commentContent.trim()) {
				uni.showToast({
					title: '请输入评论内容',
					icon: 'none'
				});
				return;
			}

			try {
				const res = await addComment({
					postId: this.postId,
					content: this.commentContent.trim()
				});
				if (res.code === 200) {
					uni.showToast({
						title: '评论成功',
						icon: 'success'
					});
					this.hideCommentInput();
					this.getComments(true); // 重新获取评论列表
					this.postDetail.commentCount += 1; // 更新评论数
				}
			} catch (error) {
				console.error('评论失败:', error);
				uni.showToast({
					title: '评论失败',
					icon: 'none'
				});
			}
		},

		// 联系用户
		contactUser() {
			// 检查登录状态
			if (!this.hasLogin) {
				this.toLogin();
				return;
			}

			// 不能联系自己
			if (this.postDetail.userId === this.userInfo.id) {
				uni.showToast({
					title: '不能联系自己',
					icon: 'none'
				});
				return;
			}

			// 跳转到聊天页面或其他联系方式
			uni.showModal({
				title: '联系用户',
				content: '是否要联系该用户？',
				success: (res) => {
					if (res.confirm) {
						// 这里可以跳转到聊天页面
						uni.navigateTo({
							url: '/subpage/meethuangshi/chat?userId=' + this.postDetail.userId
						});
					}
				}
			});
		},

		// 格式化时间
		formatTime(time) {
			if (!time) return '';
			const date = new Date(time);
			const now = new Date();
			const diff = now - date;

			if (diff < 60000) { // 小于1分钟
				return '刚刚';
			} else if (diff < 3600000) { // 小于1小时
				return Math.floor(diff / 60000) + '分钟前';
			} else if (diff < 86400000) { // 小于1天
				return Math.floor(diff / 3600000) + '小时前';
			} else if (diff < 2592000000) { // 小于30天
				return Math.floor(diff / 86400000) + '天前';
			} else {
				return date.toLocaleDateString();
			}
		},

		// 刷新页面数据
		async refreshData() {
			try {
				await Promise.all([
					this.getPostDetail(),
					this.getComments(true)
				]);
			} catch (error) {
				console.error('刷新数据失败:', error);
			} finally {
				uni.stopPullDownRefresh();
			}
		},

		// 显示评论输入框
		showCommentInputHandler() {
			// 检查登录状态
			if (!this.hasLogin) {
				this.toLogin();
				return;
			}
			this.showCommentInput = true;
		},
		// 切换回复列表展开状态
		showReplyList(commentIndex) {
			if (commentIndex >= 0 && commentIndex < this.commentList.length) {
				const comment = this.commentList[commentIndex];
				// 确保评论有回复列表才切换状态
				if (comment.replyList && comment.replyList.length > 0) {
					comment.showReplies = !comment.showReplies;

				}
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.forum-detail-page {
	background: #f7f7f7;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.share-box {}

/* 轮播图样式 */
.swiper-container {
	position: relative;
	background: #fff;
}

.swiper {
	height: 500rpx;
}

.swiper-image {
	width: 100%;
	height: 100%;
}

.image-indicator {
	position: absolute;
	bottom: 20rpx;
	right: 30rpx;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.forum-content {
	padding: 16px;
	min-height: calc(100vh - 60px);
	background: #F7F6FF;
	border-radius: 30px;
	box-sizing: border-box;
	position: relative;
	margin-top: -30px;
	/* 向上偏移，与轮播图重叠 */
	z-index: 10;
}

/* 用户信息卡片 */
.user-info-card {
	display: flex;
	align-items: center;
	background: #fff;
	padding: 34rpx 46rpx;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	position: relative;
}

.post-detail {
	padding: 0 46rpx;
	background: #fff;
	gap: 15px;

	.post-item {
		display: flex;
		align-items: center;
	}

	span {
		font-weight: 400;
		font-size: 12px;
		color: #34314F;
		line-height: 16px;
		text-align: left;
		font-style: normal;
	}

	img {
		width: 16px;
		height: 16px;
		margin-right: 2px;
	}
}

.user-avatar {
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 20rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.user-details {
	flex: 1;
}

.user-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
}

.post-time {
	font-size: 24rpx;
	color: #999;
}


/* 帖子内容 */
.post-content {
	position: relative;
	background: #fff;
	padding: 30rpx 46rpx;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;

	.post-date {
		.post-date-item {
			font-size: 12px;
			color: rgba(52, 49, 79, 0.5);
			line-height: 17px;
			text-align: left;
			font-style: normal;
		}
	}

	.post-menu {
		position: absolute;
		right: 23px;
		bottom: 20px;
		display: block;
		width: 24px;
		height: 24px;

	}
}

.content-text {
	font-size: 30rpx;
	line-height: 1.6;
	color: #333;
	margin-bottom: 20px;
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.tag-item {
	background: #f0f9ff;
	color: #0ea5e9;
	padding: 8rpx 16rpx;
	border-radius: 16rpx;
	font-size: 24rpx;
}

/* 互动数据 */
.interaction-stats {
	display: flex;
	background: #fff;
	margin: 0 20rpx 20rpx;
	padding: 30rpx;
	border-radius: 20rpx;
	justify-content: space-around;
}

.stat-item {
	text-align: center;
}

.stat-number {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	color: #ff6b6b;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
}

/* 评论区域 */
.comments-section {
	margin-top: 24px;
	border-radius: 20rpx;
	padding: 30rpx;

}

.tab-wrapper {
	gap: 40px;
	margin-bottom: 30rpx;

}

.comments-title {
	font-size: 32rpx;
	font-weight: bold;
	color: rgba(52, 49, 79, 0.4);
	padding-bottom: 20rpx;

	&.current {
		color: #333;
	}
}

.comment-item-box {
	margin-bottom: 20px;

}

.comment-item {
	display: flex;
	margin-bottom: 32rpx;

	&:last-child {
		margin-bottom: 0;
	}
}

.fold-reply-list {
	display: flex;
	align-items: center;
	padding-left: 50px;
	margin-top: 12px;

	.line {
		width: 27px;
		height: 1px;
		margin-right: 8px;
		background: rgba(52, 49, 79, 0.16);
	}

	.reply-length {
		display: flex;
		align-items: center;

		span {
			font-size: 12px;
			color: rgba(52, 49, 79, 0.7);
		}

		img {
			margin-left: 4px;
			width: 16px;
			height: 16px;
		}
	}
}

.reply-list {
	margin-top: 12px;
	padding-left: 50px;
	overflow: hidden;
	animation: slideDown 0.25s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 回复列表收起时的动画 */
.reply-list.folding {
	animation: slideUp 0.2s ease-in;
}

@keyframes slideUp {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}

.comment-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 20rpx;
	flex-shrink: 0;

	image {
		width: 100%;
		height: 100%;
	}
}

.comment-content {
	flex: 1;
}

.comment-user {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.comment-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 8rpx;
}

.comment-time {
	font-size: 24rpx;
	color: #999;

	.like-icon {
		gap: 4px;

		img {
			width: 16px;
			height: 16px;
		}
	}
}

/* 底部操作栏 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px 30px;
	border-radius: 20px 20px 0px 0px;
	z-index: 100;
}

.action-left {
	position: relative;
	display: flex;
	align-items: center;
	margin-right: 20px;

	.action-left-icon {
		position: absolute;
		top: 12px;
		left: 12px;
		width: 24px;
		height: 24px;

	}

	.action-left-input {
		min-width: 166px;
		height: 48px;
		padding: 12px 12px 12px 44px;
		background: #F7F7F7;
		border-radius: 12px;
		box-sizing: border-box;
	}
}

.action-right {
	display: flex;
	align-items: center;
	gap: 24px;

	.action-item {
		display: flex;
		align-items: center;

		img {
			width: 30px;
			height: 30px;
		}
	}


}

.action-btn {
	display: flex;
	align-items: center;
	margin-right: 40rpx;
	padding: 16rpx 24rpx;
	border-radius: 30rpx;
	background: #f5f5f5;
	transition: all 0.3s;

	&.active {
		background: #ffe6e6;

		.action-text {
			color: #ff6b6b;
		}
	}

	&:active {
		transform: scale(0.95);
	}
}

.action-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}

.action-icon-text {
	font-size: 28rpx;
	margin-right: 8rpx;
}

.action-text {
	font-size: 26rpx;
	color: #666;
}

.contact-btn {
	background: linear-gradient(135deg, #ff6b6b, #ffa500);
	color: #fff;
	padding: 20rpx 40rpx;
	border-radius: 50rpx;
	font-size: 28rpx;
	border: none;

	&:active {
		transform: scale(0.95);
	}
}

/* 评论输入框遮罩 */
.comment-input-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: flex-end;
}

.comment-input-container {
	width: 100%;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

.comment-textarea {
	width: 100%;
	min-height: 200rpx;
	background: #f5f5f5;
	border: none;
	border-radius: 16rpx;
	padding: 20rpx;
	font-size: 28rpx;
	line-height: 1.5;
	resize: none;
	margin-bottom: 20rpx;
}

.comment-actions {
	display: flex;
	justify-content: flex-end;
	gap: 20rpx;
}

.cancel-btn,
.submit-btn {
	padding: 16rpx 32rpx;
	border-radius: 24rpx;
	font-size: 28rpx;
	border: none;
}

.cancel-btn {
	background: #f5f5f5;
	color: #666;
}

.submit-btn {
	background: #ff6b6b;
	color: #fff;

	&:disabled {
		background: #ccc;
		color: #999;
	}
}

/* 通用样式 */
.flex {
	display: flex;
}

.flex-1 {
	flex: 1;
}

.align-center {
	align-items: center;
}

.justify-between {
	justify-content: space-between;
}

.text-center {
	text-align: center;
}

.gap30 {
	gap: 30rpx;
}

.mb-20 {
	margin-bottom: 20rpx;
}

.mt-20 {
	margin-top: 20rpx;
}

.p-30 {
	padding: 30rpx;
}

.border-radius-20 {
	border-radius: 20rpx;
}

.bg-white {
	background: #fff;
}

.shadow {
	box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.1);
}

/* 加载更多评论 */
.load-more-comments {
	text-align: center;
	padding: 30rpx;
	margin-top: 20rpx;
	border-radius: 16rpx;

	.load-more-text,
	.loading-text {
		font-size: 26rpx;
		color: #666;
	}
}

.no-more-comments {
	text-align: center;
	padding: 30rpx;
	margin-top: 20rpx;

	text {
		font-size: 24rpx;
		color: #999;
	}
}

/* 暂无评论提示 */
.no-comments {
	background: #fff;
	margin: 0 20rpx 20rpx;
	padding: 60rpx 30rpx;
	border-radius: 20rpx;
	text-align: center;
}

.no-comments-icon {
	font-size: 80rpx;
	margin-bottom: 20rpx;
}

.no-comments-text {
	font-size: 28rpx;
	color: #999;
}
</style>